<template>
    <sky-base-page ref="skyBasePageRef" bg-page-color="#f5f5f5">
        <afterSalesCard v-model="formData.refund_type"/>
        <sky-card>
            <uni-forms ref="formRef" :modelValue="formData" :rules="rules" label-width="120rpx">
                <uni-forms-item label="商品状态" name="goods_status" required>
                    <view @tap="showPicker=true">{{ goodsStatusText || '请选择商品状态' }}</view>
                </uni-forms-item>
                <uni-forms-item label="退款原因" name="refund_reason" required>
                    <uni-easyinput v-model="formData.refund_reason" placeholder="请输入退款原因"/>
                </uni-forms-item>
                <uni-forms-item label="退款金额" name="refund_money" required>
                    <uni-easyinput type="digit" v-model="formData.refund_money" placeholder="请输入退款金额"/>
                </uni-forms-item>
                <uni-forms-item label="问题描述" name="problem_description" required>
                    <uni-easyinput type="textarea" v-model="formData.problem_description" placeholder="请填写问题描述"/>
                </uni-forms-item>
                <uni-forms-item label="图片" name="refund_images" required>
                    <qly-upload-multiple v-model="formData.refund_images" accept="image"></qly-upload-multiple>
                </uni-forms-item>
            </uni-forms>
        </sky-card>
        <template #footer>
            <button type="primary" @click="qly.form.pass(submit,formRef)">提交</button>
        </template>
    </sky-base-page>
    
    <up-picker :show="showPicker" :columns="pickerColumns" keyName="label" closeOnClickOverlay @close="close"
               @cancel="close"
               @confirm="pickerChange"></up-picker>
    
    <!--    快递弹窗-->
    <expressPopup ref="expressPopupRef" @confirm="confirmExpress"/>
</template>
<script setup>
import afterSalesCard from './components/afterSalesCard.vue'
import expressPopup from './components/expressPopup.vue'

const goodsStatusText = ref('')
const expressPopupRef = ref()
const showPicker = ref(false)
const pickerColumns = [[{
    label: '已签收',
    value: 1
}, {
    label: '未签收',
    value: 2
}]]
const formRef = ref()
const formData = ref({
    refund_type: 2,
    goods_status: '',
    refund_money: '',
    refund_reason: '',
    problem_description: '',
    refund_images: [],
})
const rules = {
    goods_status: {
        rules: [
            {
                required: true,
                errorMessage: '请选择商品状态',
            },
        ],
    },
    refund_money: {
        rules: [
            {
                required: true,
                errorMessage: '请输入退款金额',
            },
        ],
    },
    refund_reason: {
        rules: [
            {
                required: true,
                errorMessage: '请填写退款原因',
            },
        ],
    },
    problem_description: {
        rules: [
            {
                required: true,
                errorMessage: '请填写问题描述',
            },
        ],
    },
    refund_images: {
        rules: [
            {
                required: true,
                errorMessage: '请上传图片',
            },
        ],
    }
}

const close = () => {
    showPicker.value = false
}
const pickerChange = (e) => {
    goodsStatusText.value = e.value[0].label
    formData.value.goods_status = e.value[0].value
    close()
}

const form = computed(() => {
    return {
        order_id: qly.page.params.id,
        refund_type: formData.value.refund_type,
        goods_status: formData.value.goods_status,
        refund_money: formData.value.refund_money,
        refund_reason: formData.value.refund_reason,
        problem_description: formData.value.problem_description,
        express: formData.value.express,
        express_no: formData.value.express_no,
        refund_images: formData.value.refund_images.map(item => item.url).join(',')
    }
})

// 提交
const submit = async () => {
    if (formData.value.refund_type == 1) {
        const result = await expressPopupRef.value.open()
        if (result.confirm) {
            formData.value.express = result.data.express
            formData.value.express_no = result.data.express_no
        }
    }else {
        formData.value.express = ''
        formData.value.express_no = ''
    }
    const res = await qly.api.order.order_refund.apply(form.value)
    console.log('res', res)
    if (res.code === 1) {
        uni.$emit('refreshDetail')
        qly.dialog.success('提交成功')
        uni.navigateBack()
    } else {
        qly.dialog.apiError(res).catch()
    }
}

const confirmExpress = async (e) => {

}

console.log('import.meta.env.MODE', import.meta.env.MODE)
console.log('qly', qly)
</script>
<style scoped lang="scss">
:deep(.uni-forms-item__content) {
    display: flex;
    align-items: center;
}
</style>
